Crashkurs zur Kommandozeile

Das Terminal ist eine textbasierte Schnittstelle zur Ausführung textbasierter Programme. Wenn Sie irgendwelche Tools für die Webentwicklung ausführen, besteht eine nahezu garantierte Chance, dass Sie die Kommandozeile öffnen und einige Befehle ausführen müssen, um Ihre ausgewählten Tools zu verwenden (solche Tools werden oft als CLI-Tools – Kommandozeilenschnittstellentools – bezeichnet).

Eine große Anzahl von Tools kann verwendet werden, indem Befehle in die Kommandozeile eingegeben werden; viele sind bereits auf Ihrem System vorinstalliert, und eine große Anzahl anderer sind über Paketregister installierbar. Paketregister sind wie App-Stores, aber (hauptsächlich) für kommandozeilenbasierte Tools und Software. Später in diesem Kapitel werden wir sehen, wie man einige Tools installiert, und im nächsten Kapitel werden wir mehr über Paketregister erfahren.

Eine der größten Kritiken an der Kommandozeile ist ihr stark eingeschränktes Benutzererlebnis. Die Kommandozeile zum ersten Mal zu sehen, kann eine entmutigende Erfahrung sein: ein leerer Bildschirm und ein blinkender Cursor, mit sehr wenig offensichtlicher Hilfe, was zu tun ist.

An der Oberfläche sind sie weit davon entfernt, einladend zu sein, aber es gibt viel, was man mit ihnen tun kann, und wir versprechen, dass es mit ein wenig Anleitung und Übung einfacher wird, sie zu benutzen! Deshalb bieten wir dieses Kapitel an – um Ihnen den Einstieg in diese scheinbar unfreundliche Umgebung zu erleichtern.

Das Terminal stammt ungefähr aus den 1950er-60er Jahren, und seine ursprüngliche Form ähnelt wirklich nicht dem, was wir heute benutzen (dafür sollten wir dankbar sein). Sie können ein wenig über die Geschichte auf Wikipedias Eintrag für Computer Terminal lesen.

Seitdem ist das Terminal ein konstantes Merkmal aller Betriebssysteme geblieben – von Desktop-Maschinen bis zu Servern in der Cloud, bis hin zu Mikrocomputern wie dem Raspberry Pi Zero und sogar Mobiltelefonen. Es bietet direkten Zugriff auf das zugrunde liegende Dateisystem des Computers und niedrigstufige Funktionen und ist daher unglaublich nützlich, um komplexe Aufgaben schnell auszuführen, wenn man weiß, was man tut.

Es ist auch nützlich für die Automatisierung – zum Beispiel, um einen Befehl zu schreiben, um die Titel von Hunderten von Dateien automatisch zu aktualisieren, sagen wir von "ch01-xxxx.png" zu "ch02-xxxx.png". Wenn Sie die Dateinamen mit Ihrer Finder- oder Explorer-GUI-App aktualisieren würden, würde es lange dauern.

Jedenfalls wird das Terminal nicht so schnell verschwinden.

Unten sehen Sie einige der verschiedenen Programme, die Ihnen Zugang zu einem Terminal verschaffen können.

Die nächsten Bilder zeigen die verfügbaren Kommandoaufforderungen in Windows – es gibt eine gute Auswahl an Optionen vom "cmd"-Programm bis zu "Powershell" – das über das Startmenü durch Eingabe des Programmnamen ausgeführt werden kann.

Und unten sehen Sie die macOS-Terminalanwendung.

Viele Entwickler verwenden heute Unix-basierte Tools (z.B. das Terminal und die Tools, die Sie über dieses zugreifen können). Viele Tutorials und Tools, die es heute im Web gibt, unterstützen (und leider gehen sie davon aus) Unix-basierte Systeme, aber keine Sorge – sie sind auf den meisten Systemen verfügbar. In diesem Abschnitt werden wir uns ansehen, wie man auf das Terminal auf Ihrem gewählten System zugreift.

Linux/Unix

Wie oben angedeutet, haben Linux/Unix-Systeme standardmäßig ein Terminal, das unter Ihren Anwendungen aufgelistet ist.

macOS

macOS hat ein System namens Darwin, das unterhalb der grafischen Benutzeroberfläche liegt. Darwin ist ein Unix-ähnliches System, das das Terminal und den Zugriff auf die niedrigstufigen Tools bereitstellt. macOS Darwin hat meistens eine Parität mit Unix, sicherlich gut genug, um uns keine Sorgen zu machen, während wir diesen Artikel durcharbeiten.

Das Terminal ist auf macOS unter Applications/Utilities/Terminal verfügbar.

Windows

Wie bei einigen anderen Programmiertools war die Verwendung des Terminals (oder der Kommandozeile) unter Windows traditionell nicht so einfach wie bei anderen Betriebssystemen. Aber es wird besser.

Windows hatte schon lange sein eigenes terminalähnliches Programm namens cmd ("die Eingabeaufforderung"), aber dies hat keine Parität mit Unix-Befehlen und entspricht der alten DOS-Eingabeaufforderung von Windows.

Bessere Programme existieren für die Bereitstellung einer Terminalerfahrung unter Windows, wie beispielsweise PowerShell (siehe hier, um Installer zu finden), und Gitbash (das Teil des git für Windows Toolsets ist).

Die beste Option für Windows in der heutigen Zeit ist jedoch das Windows Subsystem for Linux (WSL) – eine Kompatibilitätsschicht, um Linux-Betriebssysteme direkt innerhalb von Windows 10 auszuführen, sodass Sie ein "wahrhaftiges Terminal" direkt auf Windows ausführen können, ohne eine virtuelle Maschine zu benötigen.

Es kann kostenlos direkt aus dem Windows Store installiert werden. Sie finden alle benötigten Dokumentationen in der Windows Subsystem for Linux Documentation.

In Bezug darauf, welche Option Sie unter Windows wählen sollten, würden wir stark empfehlen, zu versuchen, das WSL zu installieren. Sie könnten bei der standardmäßigen Eingabeaufforderung (cmd) bleiben, und viele Tools werden dort in Ordnung funktionieren, aber Sie werden alles einfacher finden, wenn Sie eine bessere Parität mit Unix-Tools haben.

Nebenbemerkung: Was ist der Unterschied zwischen einer Kommandozeile und einem Terminal?

In der Regel werden diese beiden Begriffe austauschbar verwendet. Technisch gesehen ist ein Terminal eine Software, die eine Shell startet und verbindet. Eine Shell ist Ihre Sitzung und Ihre Sitzungsumgebung (wo Dinge wie die Eingabeaufforderung und Verknüpfungen angepasst werden können). Die Kommandozeile ist die wörtliche Zeile, in die Sie Befehle eingeben und der Cursor blinkt.

Obwohl es eine große Fülle von Tools gibt, die über die Kommandozeile verfügbar sind, gibt es, wenn Sie Tools wie Visual Studio Code verwenden, auch eine Vielzahl von Erweiterungen, die als Proxy verwendet werden können, um Terminalbefehle zu verwenden, ohne das Terminal direkt verwenden zu müssen. Sie werden jedoch nicht für alles, was Sie tun möchten, eine Code-Editor-Erweiterung finden – Sie werden irgendwann etwas Erfahrung mit dem Terminal sammeln müssen.

Genug geredet – schauen wir uns einige Terminalbefehle an! Aus der Box heraus, hier sind nur einige der Dinge, die die Kommandozeile tun kann, zusammen mit den Namen der jeweiligen Tools in jedem Fall:

• Navigieren Sie im Dateisystem Ihres Computers zusammen mit grundlegenden Aufgaben wie Erstellen, Kopieren, Umbenennen und Löschen:

  • Bewegen Sie sich durch Ihre Verzeichnisstruktur (Ordnerstruktur): cd
  • Erstellen Sie Verzeichnisse: mkdir
  • Erstellen Sie Dateien (und ändern Sie deren Metadaten): touch
  • Kopieren Sie Dateien oder Verzeichnisse: cp
  • Bewegen Sie Dateien oder Verzeichnisse: mv
  • Löschen Sie Dateien oder Verzeichnisse: rm

• Dateien herunterladen, die an bestimmten URLs gefunden werden: curl

• Nach Textfragmenten innerhalb größerer Textmengen suchen: grep

• Den Inhalt einer Datei seitenweise anzeigen: less, cat

• Textströme manipulieren und transformieren (z.B. Ändern aller Vorkommen von <div> in einer HTML-Datei zu <article>): awk, tr, sed

Gehen wir weiter und schauen wir uns an, wie einige dieser Tools auf der Kommandozeile verwendet werden. Bevor Sie weitergehen, öffnen Sie Ihr Terminalprogramm!

Wenn Sie die Kommandozeile besuchen, müssen Sie unweigerlich zu einem bestimmten Verzeichnis navigieren, um "etwas zu tun". Alle Betriebssysteme (angenommen, eine Standardinstallation) starten ihr Terminalprogramm in Ihrem Home-Verzeichnis, und von dort aus möchten Sie wahrscheinlich zu einem anderen Ort wechseln.

Der Befehl cd lässt Sie das Verzeichnis wechseln (Change Directory). Technisch gesehen ist cd kein Programm, sondern ein eingebautes Kommando. Das bedeutet, dass Ihr Betriebssystem es standardmäßig bereitstellt und Sie es auch nicht versehentlich löschen können – zum Glück! Es ist nicht allzu wichtig, ob ein Befehl eingebaut ist oder nicht, aber bedenken Sie, dass eingebaute Kommandos auf allen Unix-basierten Systemen vorhanden sind.

Um das Verzeichnis zu wechseln, geben Sie cd in Ihr Terminal ein, gefolgt von dem Verzeichnis, zu dem Sie wechseln möchten. Angenommen, das Verzeichnis befindet sich in Ihrem Home-Verzeichnis, können Sie cd Desktop verwenden (siehe die unten stehenden Screenshots).

Versuchen Sie, dies in das Terminal Ihres Systems einzugeben:

cd Desktop

Wenn Sie zum vorherigen Verzeichnis zurückkehren möchten, können Sie zwei Punkte verwenden:

cd ..

Wenn das Verzeichnis, zu dem Sie wechseln möchten, tief verschachtelt ist, müssen Sie den Pfad kennen, um dorthin zu gelangen. Das wird normalerweise einfacher, wenn Sie sich mit der Struktur Ihres Dateisystems besser vertraut machen, aber wenn Sie sich nicht sicher über den Pfad sind, können Sie diesen normalerweise mit einer Kombination des ls-Befehls (siehe unten) und durch Klicken in Ihrem Explorer/Finder-Fenster herausfinden, um zu sehen, wo ein Verzeichnis im Verhältnis zu Ihrem aktuellen Standort ist.

Zum Beispiel, wenn Sie zu einem Verzeichnis namens src gehen möchten, das sich in einem Verzeichnis namens project befindet, das sich auf dem Desktop befindet, könnten Sie diese drei Befehle verwenden, um von Ihrem Home-Verzeichnis dorthin zu gelangen:

cd Desktop
cd project
cd src

Aber das ist eine Zeitverschwendung – stattdessen können Sie einen Befehl eingeben, bei dem die verschiedenen Elemente im Pfad mit Schrägstrichen getrennt sind, ähnlich wie beim Angeben von Pfaden zu Bildern oder anderen Ressourcen in CSS, HTML oder JavaScript-Code:

cd Desktop/project/src

Beachten Sie, dass das Einfügen eines Schrägstrichs am Anfang Ihres Pfads den Pfad absolut macht, zum Beispiel /Users/your-user-name/Desktop. Das Auslassen des Schrägstrichs, wie wir es oben getan haben, macht den Pfad relativ zu Ihrem aktuellen Arbeitsverzeichnis. Dies ist genau daselbe, was Sie bei URLs in Ihrem Webbrowser sehen würden. Ein vorderer Schrägstrich bedeutet "an der Wurzel der Website", während das Auslassen des Schrägstrichs bedeutet "die URL ist relativ zu meiner aktuellen Seite".

Ein weiteres eingebautes Unix-Kommando ist ls (kurz für list), das die Inhalte des Verzeichnisses auflistet, in dem Sie sich gerade befinden. Beachten Sie, dass dies nicht funktioniert, wenn Sie die standardmäßige Windows-Eingabeaufforderung (cmd) verwenden – das dortige Äquivalent ist dir.

Versuchen Sie, dies jetzt in Ihrem Terminal auszuführen:

ls

Dies gibt Ihnen eine Liste der Dateien und Verzeichnisse in Ihrem aktuellen Arbeitsverzeichnis, aber die Informationen sind wirklich sehr einfach – Sie erhalten nur den Namen jedes vorhandenen Elements, aber nicht, ob es sich um eine Datei oder ein Verzeichnis handelt, oder irgendetwas anderes. Glücklicherweise kann eine kleine Änderung an der Verwendung des Befehls eine Menge mehr Informationen liefern.

Die meisten Terminalbefehle haben Optionen – dies sind Modifikatoren, die Sie am Ende eines Befehls hinzufügen, die sein Verhalten auf eine leicht andere Weise ändern. Diese bestehen normalerweise aus einem Leerzeichen nach dem Befehlsnamen, gefolgt von einem Bindestrich, gefolgt von einem oder mehreren Buchstaben.

Zum Beispiel, probieren Sie dies aus und sehen Sie, was Sie bekommen:

ls -l

Im Fall von ls gibt die Option -l (Bindestrich ell) Ihnen eine Auflistung mit einem Dateinamens oder Verzeichnisnamen in jeder Zeile und viel mehr angezeigten Informationen. Verzeichnisse können identifiziert werden, indem man nach einem Buchstaben "d" ganz links in den Zeilen sucht. Das sind die, in die wir cd ausführen können.

Unten ist ein Screenshot mit einem "einfachen" macOS-Terminal oben und einem angepassten Terminal mit einigen zusätzlichen Symbolen und Farben, um es lebendig zu halten – beide zeigen die Ergebnisse des Ausführens von ls -l:

Jetzt, da wir zwei grundlegende Befehle besprochen haben, schauen Sie sich ein wenig in Ihrem Verzeichnis um und sehen Sie, ob Sie von einem Ort zum nächsten navigieren können.

Es gibt eine Reihe anderer grundlegender Dienstprogramme, die Sie wahrscheinlich ziemlich oft verwenden werden, während Sie mit dem Terminal arbeiten. Sie sind ziemlich einfach, also werden wir nicht alle im Detail erklären wie die vorherigen beiden.

Versuchen Sie damit in einem Testverzeichnis herumzuspielen, das Sie irgendwo erstellt haben, damit Sie nicht versehentlich etwas Wichtiges löschen, und verwenden Sie die folgenden Beispielbefehle als Leitfaden:

• mkdir – dies erstellt ein neues Verzeichnis im aktuellen Verzeichnis, in dem Sie sich befinden, mit dem Namen, den Sie nach dem Befehlsnamen angeben. Zum Beispiel, mkdir my-awesome-website wird ein neues Verzeichnis namens my-awesome-website erstellen.
• rmdir – entfernt das angegebene Verzeichnis, aber nur, wenn es leer ist. Zum Beispiel, rmdir my-awesome-website wird das von uns erstellte Verzeichnis entfernen. Wenn Sie ein Verzeichnis entfernen möchten, das nicht leer ist (und dabei auch alles enthält, es entfernen), können Sie stattdessen rm -r verwenden (siehe unten), aber das ist gefährlich. Stellen Sie sicher, dass sich in dem Verzeichnis nichts befindet, was Sie später noch benötigen könnten, da es für immer verschwunden ist.
• touch – erstellt eine neue leere Datei im aktuellen Verzeichnis. Zum Beispiel, touch mdn-example.md erstellt eine neue leere Datei namens mdn-example.md.
• mv – bewegt eine Datei vom ersten angegebenen Dateipfad zu dem zweiten angegebenen Dateipfad, zum Beispiel mv mdn-example.md mdn-example.txt (die Positionen werden als Dateipfade geschrieben). Dieser Befehl bewegt eine Datei namens mdn-example.md im aktuellen Verzeichnis in eine Datei namens mdn-example.txt im aktuellen Verzeichnis. Technisch gesehen wird die Datei bewegt, aber von einem praktischen Standpunkt aus gesehen, wird die Datei tatsächlich umbenannt.
• cp – ähnlich wie bei mv erzeugt cp eine Kopie der Datei an der ersten angegebenen Position an der zweiten angegebenen Position. Zum Beispiel, cp mdn-example.txt mdn-example.txt.bak erstellt eine Kopie von mdn-example.txt namens mdn-example.txt.bak (Sie können sie natürlich etwas anderes nennen, wenn Sie möchten).
• rm – entfernt die angegebene Datei. Zum Beispiel, rm mdn-example.txt löscht eine einzige Datei namens mdn-example.txt. Beachten Sie, dass dieses Löschen dauerhaft ist und nicht über den Papierkorb rückgängig gemacht werden kann, den Sie möglicherweise auf Ihrer Desktop-Benutzeroberfläche haben.

Wir haben darauf hingewiesen, aber um klar zu sein – Sie müssen mit dem Terminal vorsichtig sein. Einfache Befehle sind nicht allzu gefährlich, aber wenn Sie anfangen, komplexere Befehle zusammenzustellen, müssen Sie genau überlegen, was der Befehl tun wird, und versuchen, sie zuerst zu testen, bevor Sie sie schließlich im beabsichtigten Verzeichnis ausführen.

Angenommen, Sie haben 1000 Textdateien in einem Verzeichnis und möchten alle durchgehen und nur diejenigen löschen, die eine bestimmte Teilzeichenfolge im Dateinamen haben. Wenn Sie nicht vorsichtig sind, könnten Sie versehentlich etwas Wichtiges löschen, wodurch Sie eine Menge Ihrer Arbeit verlieren.

Eine gute Angewohnheit ist es, Ihren Terminalbefehl in einem Texteditor zu schreiben, herauszufinden, wie er aussehen sollte, und eine Sicherungskopie Ihres Verzeichnisses zu erstellen, um den Befehl darauf zu testen.

Wenn Sie nicht bequem damit sind, Terminalbefehle auf Ihrer eigenen Maschine auszuprobieren, stehen gehostete Online-Terminals zur Verfügung, die sichere Orte bieten, um das Eingeben von Befehlen zu üben, ohne das Risiko, Ihre eigene Maschine zu beschädigen:

• Unser Lernpartner, Scrimba, bietet ein Terminal für das Eingeben von Befehlen in ihrer Lernumgebung. Ein großartiger Ort, um dies in Aktion zu sehen, ist ihr Crashkurs zur Kommandozeile ^{MDN-Lernpartner}, der auch eine unterhaltsame interaktive Einführung zum Navigieren in der Datei-Struktur und zur Dateimanipulation über das Terminal bietet.
• Glitch.com ist ein großartiger Ort, um Webentwicklungscode auszuprobieren, und Glitch-Projekte beinhalten auch ein Terminal für das Ausführen von Befehlen.

Eine großartige Ressource für einen schnellen Überblick über bestimmte Terminalbefehle ist tldr.sh. Dies ist ein gemeinschaftlich betriebenes Dokumentationsservice, ähnlich wie MDN, aber speziell für Terminalbefehle.

Im nächsten Abschnitt wollen wir es eine Stufe (oder mehrere Stufen tatsächlich) höher schalten und sehen, wie wir Befehle auf der Kommandozeile verbinden können, um wirklich zu sehen, wie das Terminal bei der Arbeit mit der regulären Desktop-Benutzeroberfläche von Vorteil sein kann.

Das Terminal entfaltet sein volles Potenzial, wenn Sie beginnen, Befehle miteinander zu verketten, indem Sie das | (Pipe) Symbol verwenden. Schauen wir uns ein sehr schnelles Beispiel an, was das bedeutet.

Wir haben bereits ls gesehen, das die Inhalte des aktuellen Verzeichnisses ausgibt:

ls

Aber was, wenn wir schnell die Anzahl der Dateien und Verzeichnisse im aktuellen Verzeichnis zählen wollten? ls kann das nicht alleine.

Es gibt ein anderes Unix-Tool namens wc. Dies zählt die Anzahl der Wörter, Zeilen, Zeichen oder Bytes von allem, was in es eingegeben wird. Das kann eine Textdatei sein – das folgende Beispiel gibt die Anzahl der Zeilen in myfile.txt aus:

wc -l myfile.txt

Aber es kann auch die Anzahl der Zeilen von allem zählen, was in es hineingepiped wird. Zum Beispiel zählt der folgende Befehl die Anzahl der von ls ausgegebenen Zeilen (was es normalerweise auf das Terminal ausdrucken würde, wenn es allein ausgeführt wird) und gibt stattdessen diese Anzahl auf das Terminal aus:

ls | wc -l

Da ls jede Datei oder jedes Verzeichnis in eine eigene Zeile druckt, ergibt sich dadurch effektiv eine Verzeichnis- und Dateizählung.

Was passiert hier also? Eine allgemeine Philosophie von (Unix-)Kommandozeilentools ist, dass sie Text auf das Terminal ausdrucken (auch als "Ausgabe auf die Standardausgabe" bezeichnet oder STDOUT). Viele Befehle können auch Inhalte aus gestreamtem Input lesen (bekannt als "Standard-Input" oder STDIN).

Der Pipe-Operator kann diese Eingaben und Ausgaben verbinden, sodass wir zunehmend komplexere Operationen erstellen können, die unseren Bedürfnissen entsprechen – die Ausgabe eines Befehls kann zum Input des nächsten Befehls werden. In diesem Fall würde ls normalerweise seine Ausgabe auf STDOUT drucken, aber stattdessen wird die Ausgabe von ls in wc gepiped, das diese Ausgabe als Input nimmt, die Anzahl der enthaltenen Zeilen zählt und diese Anzahl stattdessen auf STDOUT ausdruckt.

Gehen wir etwas komplizierteres durch.

Wir versuchen zunächst, die Inhalte der MDN-Seite "fetch" mit dem Befehl curl abzurufen (der zum Anfordern von Inhalten von URLs verwendet werden kann), von https://developer.mozilla.org/de/docs/Web/API/WindowOrWorkerGlobalScope/fetch. Versuchen Sie es jetzt:

curl https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

Sie erhalten keine Ausgabe, weil die Seite umgeleitet wurde (auf /Web/API/fetch). Wir müssen curl explizit mitteilen, Umleitungen mit dem -L-Flag zu folgen.

Schauen wir uns auch die Header an, die developer.mozilla.org mit dem -I-Flag von curl zurückgibt, und drucken alle Ortumleitungen, die es an das Terminal sendet, indem wir die Ausgabe von curl in grep pipen (wir werden grep bitten, alle Zeilen zurückzugeben, die das Wort "location" enthalten).

Versuchen Sie, das Folgende auszuführen (Sie werden sehen, dass es nur eine Umleitung gibt, bevor wir die endgültige Seite erreichen):

curl https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch -L -I | grep location

Ihre Ausgabe sollte etwa so aussehen (curl wird zuerst einige Zähler und Ähnliches ausgeben):

location: /en-US/docs/Web/API/Window/fetch

Obwohl konstruiert, könnten wir dieses Ergebnis ein wenig weiter treiben und die location: Zeileninhalte transformieren, indem wir den Basisursprung am Anfang jeder hinzufügen, sodass vollständige URLs ausgedruckt werden. Dafür fügen wir awk hinzu (was eine Programmiersprache ähnlich zu JavaScript oder Ruby oder Python ist, nur viel älter!).

Versuchen Sie dies auszuführen:

curl https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }'

Ihre endgültige Ausgabe sollte so aussehen:

https://developer.mozilla.org/en-US/docs/Web/API/Window/fetch

Indem wir diese Befehle kombiniert haben, haben wir die Ausgabe angepasst, um die vollständigen URLs zu zeigen, die der Mozilla-Server abruft, wenn wir die URL /docs/Web/API/WindowOrWorkerGlobalScope/fetch anfordern. Das Kennenlernen Ihres Systems wird sich in den kommenden Jahren als nützlich erweisen – erfahren Sie, wie diese Einweg-Tools funktionieren und wie sie Teil Ihres Werkzeugkastens werden können, um Nischenprobleme zu lösen.

Jetzt, wo wir uns einige der eingebauten Befehle angesehen haben, mit denen Ihr System ausgestattet ist, schauen wir, wie wir ein Drittanbieter-CLI-Tool installieren und verwenden können.

Das umfangreiche Ökosystem an installierbaren Tools für die Front-End-Webentwicklung existiert derzeit hauptsächlich in npm, einem in Privatbesitz befindlichen, paket-hosting Dienst, das eng mit Node.js zusammenarbeitet. Dies erweitert sich langsam – Sie können erwarten, dass in der Zukunft mehr Anbieter von Paketen auftauchen.

Installing Node.js installiert auch das npm-Befehlszeilen-Tool (und ein zusätzliches npm-zentrisches Tool namens npx), das ein Tor zur Installation zusätzlicher Befehlszeilen-Tools bietet. Node.js und npm arbeiten auf allen Systemen gleich: macOS, Windows und Linux.

Installieren Sie jetzt npm auf Ihrem System, indem Sie die oben genannte URL besuchen und einen geeigneten Node.js-Installer für Ihr Betriebssystem herunterladen und ausführen. Stellen Sie sicher, dass Sie npm als Teil der Installation einschließen, wenn Sie dazu aufgefordert werden.

Wir werden wieder Prettier als Beispiel verwenden. Wir haben gezeigt, wie man es als Visual Studio Code-Erweiterung in unserem Code-Editoren-Artikel installiert. Hier zeigen wir Ihnen, wie Sie es als Befehlszeilen-Tool installieren.

Bevor wir beginnen, Prettier zu installieren, gibt es eine Frage zu beantworten – "wo sollten wir es installieren?"

Mit npm haben wir die Wahl, Tools global – also überall zugänglich – oder lokal in das aktuelle Projektverzeichnis zu installieren.

Es gibt Vor- und Nachteile in beiden Richtungen – und die folgenden Listen von Vor- und Nachteilen für die globale Installation sind keineswegs vollständig.

Vorteile der globalen Installation:

• Überall in Ihrem Terminal zugänglich
• Nur einmal installieren
• Verbraucht weniger Speicherplatz
• Immer die selbe Version
• Fühlt sich wie jeder andere Unix-Befehl an

Nachteile der globalen Installation:

• Möglicherweise nicht mit dem Code der Projekts kompatibel
• Andere Entwickler in Ihrem Team werden nicht Zugriff auf diese Tools haben, zum Beispiel, wenn Sie den Code über ein Tool wie git teilen.
• Im Zusammenhang mit dem vorherigen Punkt, macht es den Projektcode schwieriger zu replizieren (wenn Sie Ihre Tools lokal installieren, können sie als Abhängigkeiten eingerichtet und mit npm install installiert werden).

Obwohl die Liste der Nachteile kürzer ist, sind die negativen Auswirkungen der globalen Installation potenziell viel größer als die Vorteile. Hier werden wir lokal installieren, aber fühlen Sie sich frei, global zu installieren, sobald Sie die relativen Risiken verstehen.

Prettier ist ein meinungsstarkes Code-Formatierungstool für Frontend-Entwickler und konzentriert sich auf JavaScript-basierte Sprachen und fügt Unterstützung für HTML, CSS, SCSS, JSON und mehr hinzu.

Prettier kann:

• Die kognitive Belastung vermeiden, den Stil manuell in allen Ihren Code-Dateien konsistent zu halten; Prettier kann dies automatisch für Sie erledigen.
• Neulingen in der Webentwicklung helfen, ihren Code nach den besten Praktiken zu formatieren.
• Auf jedem Betriebssystem installiert werden und sogar direkt als Teil des Projektwerkzeugs, um sicherzustellen, dass Kollegen und Freunde, die an Ihrem Code arbeiten, denselben Code-Stil verwenden, den Sie verwenden.
• So konfiguriert werden, dass es beim Speichern, während Sie tippen oder sogar vor der Veröffentlichung Ihres Codes ausgeführt wird (mit zusätzlichem Werkzeug, das wir später im Modul sehen werden).

Für diesen Artikel werden wir Prettier lokal installieren, wie im Prettier-Installationsleitfaden vorgeschlagen.

Nachdem Sie Node installiert haben, öffnen Sie das Terminal und führen Sie den folgenden Befehl aus, um Prettier zu installieren (wir werden erklären, was --save-dev im nächsten Artikel macht):

npm install --save-dev prettier

Sie können die Datei jetzt lokal mit dem npx Tool ausführen. Das Ausführen des Befehls ohne Argumente wird, wie bei vielen anderen Befehlen, Nutzungs- und Hilfsinformationen anzeigen. Versuchen Sie dies jetzt:

npx prettier

Ihre Ausgabe sollte etwa so aussehen:

Usage: prettier [options] [file/glob ...]

By default, output is written to stdout.
Stdin is read if it is piped to Prettier and no files are given.

…

Es lohnt sich immer, zumindest die Nutzungsinformationen zu überfliegen, selbst wenn sie lang sind. Es wird Ihnen helfen zu verstehen, wie das Tool gedacht ist verwendet zu werden.

Lassen Sie uns eine kurze Runde mit Prettier spielen, damit Sie sehen können, wie es funktioniert.

Erstellen Sie zunächst ein neues Verzeichnis irgendwo in Ihrem Dateisystem, das leicht zu finden ist. Vielleicht ein Verzeichnis namens prettier-test auf Ihrem Desktop.

Speichern Sie nun den folgenden Code in einer neuen Datei namens index.js in Ihrem Testverzeichnis:

const myObj = {
a:1,b:{c:2}}
function printMe(obj){console.log(obj.b.c)}
printMe(myObj)

Wir können Prettier gegen eine Codebasis ausführen, um nur zu überprüfen, ob unser Code angepasst werden muss. Navigieren Sie mit cd in Ihr Verzeichnis und versuchen Sie, diesen Befehl auszuführen:

npx prettier --check index.js

Sie sollten eine Ausgabe erhalten wie:

Checking formatting...
index.js
Code style issues found in the above file(s). Forgot to run Prettier?

Es gibt also einige Codestile, die behoben werden können. Kein Problem. Wenn Sie die Option --write zum prettier-Befehl hinzufügen, werden diese behoben, sodass wir uns darauf konzentrieren können, wirklich nützlichen Code zu schreiben.

Versuchen Sie jetzt, diese Version des Befehls auszuführen:

npx prettier --write index.js

Sie erhalten eine Ausgabe wie diese

Checking formatting...
index.js
Code style issues fixed in the above file(s).

Aber noch wichtiger, wenn Sie zu Ihrer JavaScript-Datei zurückblicken, werden Sie feststellen, dass sie in etwa so formatiert wurde:

const myObj = {
  a: 1,
  b: { c: 2 },
};
function printMe(obj) {
  console.log(obj.b.c);
}
printMe(myObj);

Abhängig von dem Arbeitsablauf (oder dem, den Sie wählen) können Sie dies zu einem automatisierten Teil Ihres Prozesses machen. Automatisierung ist wirklich der Bereich, in dem Tools glänzen; unsere persönliche Präferenz ist die Art von Automatisierung, die "einfach passiert", ohne irgendetwas konfigurieren zu müssen.

Mit Prettier gibt es eine Vielzahl von Möglichkeiten, um Automatisierung zu erreichen und obwohl sie über den Rahmen dieses Artikels hinausgehen, gibt es einige ausgezeichnete Ressourcen im Internet, die helfen können (von denen einige verlinkt wurden). Sie können Prettier aufrufen:

• Bevor Sie Ihren Code in ein git-Repository komittieren, mit Husky.
• Jedes Mal, wenn Sie auf "Speichern" in Ihrem Code-Editor klicken, sei es VS Code oder Sublime Text.
• Als Teil von Prüfvorgängen der kontinuierlichen Integration mit Tools wie GitHub Actions.

Unsere persönliche Präferenz ist die zweite Option – während Sie zum Beispiel VS Code verwenden, springt Prettier ein und bereinigt jedes Mal jedes Format, das es tun muss, wenn wir speichern drücken. Sie finden viel mehr Informationen über die Verwendung von Prettier auf verschiedene Arten in den Prettier-Dokumenten.

Wenn Sie mit ein paar weiteren Tools spielen möchten, hier ist eine kurze Liste, die Spaß machen könnte:

• bat – Eine "schönere" cat (cat wird verwendet, um die Inhalte von Dateien anzuzeigen).
• prettyping – ping auf der Kommandozeile, aber visualisiert (ping ist ein nützliches Tool, um zu überprüfen, ob ein Server reagiert).
• htop – Ein Prozessbetrachter, nützlich, wenn etwas Ihren CPU-Lüfter wie einen Düsenjet klingen lässt und Sie das störende Programm identifizieren möchten.
• tldr – bereits erwähnt in diesem Kapitel, aber als Kommandozeilen-Tool erhältlich.

Beachten Sie, dass einige der oben genannten Vorschläge möglicherweise mit npm installiert werden müssen, wie wir es mit Prettier getan haben.

Damit kommen wir zum Ende unserer Einführungstour durch das Terminal/Kommandozeile und zum Ende des Environment-Setup-Moduls. Als nächstes lassen wir Sie Ihre erste einfache Website erstellen, damit Sie eine Vorstellung davon bekommen, wie Webentwicklung aussieht.

• Zurück
• Übersicht: Einrichtung der Entwicklungsumgebung
• Weiter